<template>
	<view :class="currentTheme">
		<a-nabbar name="收货地址" />
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :up="option" :down="option" :height="height" :fixed="false">
			<view class="u-padding-32">
				<view class="u-margin-bottom-20" v-for="(item, index) in dataList" :key="index">
					<item-box padding="0">
						<view class="u-padding-left-30 u-padding-right-30 u-padding-top-20 u-padding-bottom-20" @click="editAddress(item)">
							<view class="u-flex">
								<text class="box-title text-bold">{{ item.realName }}</text>
								<text class="u-inline-flex u-font-22 text-order-time u-margin-left-22 u-padding-right-22">{{ item.phone }}</text>
								<view>
									<item-btn radius="10" width="90" height="44" v-if="item.isDefault == 1"><text class="u-font-20">默认</text></item-btn>
								</view>
							</view>
							<view class="u-margin-top-15 u-font-22 text-order-time u-flex u-row-between">
								<view>{{ item.cityPath | cityPathFormat }}{{ item.detail }}</view>
								<u-icon name="arrow-right" size="28" color="#1A1A1A"></u-icon>
							</view>
						</view>
						<view class="u-border-top u-padding-left-30 u-padding-right-30 u-padding-top-20 u-padding-bottom-20 u-flex u-row-between u-font-22 text-order-time">
							<view>
								<!-- <u-radio v-model=""></u-radio> -->
								<v-radio :name="item.id" v-model="activeDefaultId" @change="setDefault">设置默认收货地址</v-radio>
							</view>
							<view @click="removeItem(item)">删除</view>
						</view>
						<!-- <v-address :item="item"   @click.native="selectItem(item)">
							<view class="">
								<view class="u-margin-top-40 u-flex u-row-between">
									<u-checkbox icon-size="28" v-model="item.isDefault" @change="setDefault(item)"><text class="text-color-9698A4 u-font-24">默认地址</text></u-checkbox>
									<view class="u-padding-right-35 u-position-relative u-text-right right-more"  @click.stop="showSet(item)">
										<u-icon name="/static/images/more.png" size="9"></u-icon>
										<view class="u-position-absolute pop text-color-DEDEDE u-font-26" v-if="item.show">
											<view class="tips" >编辑</view>
											<view class="tips">删除</view>
										</view>
									</view>
								</view>
							</view>
						</v-address> -->
					</item-box>
				</view>
			</view>
			<view class="add-address text-color-765CFE u-font-26 " @click="detail">添加收货地址</view>
		</mescroll-uni>
	</view>
</template>

<script>
	
import vAddress from '@/pagesA/acomponents/address/address.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import listMixins from '@/mixins/listMixins.js';
import { add, customRequest, deleteIds } from '@/api/crud.js';
import vRadio from '@/components/itemRadio/itemRadio.vue';
export default {
	mixins: [MescrollMixin, listMixins],
	components: {
		vAddress,
		vRadio
	},
	data() {
		return {
			dataList: [],
			activeDefaultId: '',
			option: {
				use: false,
				empty: {
					tip: '暂未添加收货地址'
				}
			},
			options: {},
			height: 0,
			apiModule: 'shopApi',
			apiType: 'userAddress'
		};
	},
	onShow() {
		this.getList();
	},
	onReady() {
		this.height = (uni.getSystemInfoSync().screenHeight - uni.upx2px(450)) * 2;
	},
	onLoad(option) {
		this.options = option;
	},
	methods: {
		getList() {
			this.getData('list').then(res => {
				this.dataList = res;
				const activeDefault = res.find(val => val.isDefault == 1);
				if (activeDefault) this.activeDefaultId = activeDefault.id;
				this.dataList.length == 0 && this.mescroll.showEmpty();
			});
		},
		showSet(item) {
			this.$set(item, 'show', !item.show);
		},
		editAddress(item) {
			if (this.options.type) {
				uni.$emit(this.options.type, item); //全局通知
				this.$u.route({ type: 'back' });
			} else {
				this.detail(item);
			}
		},
		detail(item) {
			this.$u.route({
				url: '/pagesA/editAddress/editAddress',
				params: {
					id: item.id
				}
			});
		},
		//设置收货地址
		setDefault(id) {
			customRequest(
				{
					id,
					uid: this.loginForm.uid
				},
				this.apiType,
				this.apiModule,
				'setDefault'
			)
				.then(res => {
					this.dataList.map(val => {
						this.$set(val, 'isDefault', val.id === id);
						return val;
					});
					this.$u.toast('修改成功');
				})
				.catch(() => {
					item.isDefault = false;
				});
		},
		//删除收货地址
		removeItem(item) {
			uni.showModal({
				cancelText: '否',
				confirmText: '是',
				title: '温馨提示',
				content: '确定删除该收货地址嘛？',
				success: ({ confirm }) => {
					confirm &&
						deleteIds('', this.apiType, this.apiModule, item.id).then(res => {
							this.getList();
							this.$u.toast('删除成功');
						});
				}
			});
		},
		selectItem(item) {
			if (this.options.type) {
				uni.$emit(this.options.type, item); //全局通知
				this.$u.route({ type: 'back' });
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.add-address {
	position: fixed;
	bottom: 15vh;
	left: 50vw;
	transform: translateX(-150rpx);
	width: 300rpx;
	height: 75rpx;
	line-height: 72rpx;
	text-align: center;
	border: 1rpx solid #765cfe;
	border-radius: 50rpx;
}
.pop {
	width: 172rpx;
	background: #2b2649;
	border: 1rpx solid #4a3b97;
	border-radius: 2rpx;
	right: 0;
	.tips {
		text-align: center;
		line-height: 64rpx;
		&:not(:last-child) {
			border-bottom: 1rpx solid #4a3b97;
		}
	}
}
.right-more {
	flex: 1;
}

</style>
